<template>
  <div id="components-layout-demo-basic">
    <a-layout style="height: 100%">
      <a-layout-sider
        :style="{
          flex: LeftHidden ? '0 0 420px !important' : '0 0 0 !important',
          transition: 'flex 0.5s linear',
        }"
      >
        <!-- 左侧导航 -->

        <NavigaTion v-show="LeftHidden" />
      </a-layout-sider>
      <a-layout>
        <a-layout-content>
          <router-view />
        </a-layout-content>
      </a-layout>
      <a-layout-sider
        :style="{
          flex: RightHidden ? '0 0 420px !important' : '0 0 0 !important',
          transition: 'flex 0.5s linear',
        }"
      >
        <Atlas v-show="RightHidden" />
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script>
import NavigaTion from "@/page/navigation/index.vue";
import Atlas from "@/components/knowledgeAtlas.vue";
import { mapState } from "vuex";
export default {
  components: { NavigaTion, Atlas },
  data() {
    return {
      // siderFlag: true,
    };
  },
  methods: {
    // fold() {
    //   this.siderFlag = false;
    // },
  },
  computed: {
    ...mapState(["LeftHidden", "RightHidden"]),
  },
};
</script>

<style lang="less" scoped>
#components-layout-demo-basic {
  height: 100%;
  /* text-align: center; */
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  /* background: #7dbcea; */
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  color: #fff;
  line-height: 120px;
  width: 425px !important;
  min-width: 0 !important;
  flex: 0 0 425px !important;
  max-width: 425px !important;
  background: url("../assets/Img/sider/SierBackground.png") no-repeat center
    center !important ;
  background-size: 100% 100% !important;
  transition: left 0.5s ease;
  .ant-layout-sider-children {
  }
}
#components-layout-demo-basic .ant-layout-content {
  // background: rgba(16, 142, 233, 1);
  // color: #fff;
  min-height: 120px;
  // line-height: 120px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
  position: relative;
}
// .transformDemo {
//   transform: translateX(0);
// }
</style>
